<template>
  <div class="note">
    <Loading v-if="toloading"></Loading>
    <template v-else>
      <div class="top">
        <ul>
          <li v-for="item in topics[0]" :key="item.id"># {{ item.name }}</li>
        </ul>
        <ul>
          <li v-for="item in topics[1]" :key="item.id"># {{ item.name }}</li>
        </ul>
      </div>
      <div class="list">
        <ul ref="list1">
          <NoteItem
            v-for="(item1, index) in list1"
            :key="index + Math.random() * 10"
            :item="item1"
            @get-height="getHeight1"
          ></NoteItem>
        </ul>
        <ul ref="list2">
          <NoteItem
            v-for="(item2, index) in list2"
            :key="index + Math.random() * 10"
            :item="item2"
            @get-height="getHeight2"
          ></NoteItem>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import NoteItem from "@/components/NoteItem.vue";
import Loading from "@/components/Loading.vue";
export default {
  components: {
    NoteItem,
    Loading,
  },
  data: function () {
    return {
      page: 0,
      topics: [],
      list: [],
      list1: [],
      list2: [],
      height1: 0,
      height2: 0,
      index: 0,
      toloading: false,
    };
  },
  methods: {
    getHeight1() {
      this.height1 = 0;
      this.$refs.list1.querySelectorAll("li").forEach((ele) => {
        this.height1 += ele.offsetHeight;
      });
      if (this.index < this.list.length) {
        if (this.height1 > this.height2) {
          this.list2.push(this.list[this.index]);
          this.index++;
        } else {
          this.list1.push(this.list[this.index]);
          this.index++;
        }
      }
    },
    getHeight2() {
      this.height2 = 0;
      this.$refs.list2.querySelectorAll("li").forEach((ele) => {
        this.height2 += ele.offsetHeight;
      });
      if (this.index < this.list.length) {
        if (this.height1 > this.height2) {
          this.list2.push(this.list[this.index]);
          this.index++;
        } else {
          this.list1.push(this.list[this.index]);
          this.index++;
        }
      }
    },
  },
  created: function () {
    this.toloading = true;
    this.axios
      .get(`https://apis.netstart.cn/douguo/home/notes/${this.page}/20`)
      .then((res) => {
        // console.log(res.data.result);
        this.topics = res.data.result.topics;
        this.list = res.data.result.list;
        this.list1.push(this.list[0]);
        this.list2.push(this.list[1]);
        this.index = 2;
        this.toloading = false;
      });
  },
  mounted: function () {
    // // this.vm.$nextTick(function () {
    // //   console.log(this.$refs.list1, this.$refs.list2);
    // //   console.log(this.$refs.list1.offsetHeight, this.$refs.list2.offsetHeight);
    // // });
    // // console.log(this.$refs.list1, this.$refs.list2);
    // setTimeout(() => {
    //   console.log(this.$refs.list1, this.$refs.list2);
    //   console.log(
    //     this.$refs.thisitem1[0].height,
    //     this.$refs.thisitem2[0].height
    //   );
    // }, 150);
  },
};
</script>

<style lang="less" scoped>
.note {
  margin-top: calc(9vw + 15px + 45px);
  .top {
    // overflow-y: auto;
    ul {
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;
      padding: 5px 10px;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        flex-shrink: 0;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: bold;
        background-color: #f3f9fa;
        color: #76adb4;
        border-radius: 20px;
        margin-right: 5px;
      }
    }
  }
  .list {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    overflow-y: auto;
    background-color: #fafafa;
    ul {
      width: 48vw;
      // height: 10vh;
      // background-color: red;
    }
  }
}
</style>